<template>
    <div class="w-full h-full">
        <div class="w-2/3  m-auto pt-10 flex justify-center text-2xl">
            {{ videoItem.title }}
        </div>
        <div class="w-5/6 m-auto flex">
            <div class="w-2/3 h-2/3 m-auto">
                <div class="m-auto w-full flex justify-center pt-10">
                    <vue3VideoPlay v-bind="options">
                    </vue3VideoPlay>
                </div>
            </div>
            <div class="w-1/3 mt-10">
                <div class="w-full h-full shadow-md">
                    <h3>评论区</h3>
                    <div>
                        <div class="w-full h-20 flex justify-center items-center  p-2">
                            <el-input type="textarea" v-model="comment" placeholder="请输入评论" class="w-3/4"></el-input>
                            <el-button class="w-1/4" @click="addComment">评论</el-button>
                        </div>
                        <el-divider class="p-2"></el-divider>
                        <div class="w-full h-72 overflow-y-auto">
                            <div class="w-5/6 m-auto h-20 shadow-sm rounded-sm mt-2" v-for="item in commets" :key="item.id">
                                <el-card class="w-full h-full">
                                    <span>{{ item.username }}</span>
                                    <br>
                                    <span>{{ item.content }}</span>
                                </el-card>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>
 
<script setup>
import { useRoute } from 'vue-router';
import { reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
import axios from 'axios'
const route = useRoute()
const query = route.query
let user_id = localStorage.getItem('user_id')
let username = localStorage.getItem('username')
let commets = ref([])
let comment = ref('')
let videoItem = JSON.parse(query.videoInfo)
const options = reactive({
    width: "800px", //播放器宽度
    height: "600px", //播放器高度
    color: "#409eff", //主题色
    title: 'test', //视频名称
    src: videoItem.url, //视频源
    muted: false, //静音
    webFullScreen: false,
    speed: true,
    speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
    autoPlay: false, //自动播放
    loop: false, //循环播放
    mirror: false, //镜像画面
    ligthOff: false, //关灯模式
    volume: 0.3, //默认音量大小
    control: true, //是否显示控制
    controlBtns: [
        "audioTrack",
        "quality",
        "speedRate",
        "volume",
        "setting",
        "pip",
        "pageFullScreen",
        "fullScreen",
    ], //显示所有按钮,
});

function getComments() {
    axios.post('http://localhost:8000/comments/get_one', { video_id: videoItem.id }).then(res => {
        let resp = res.data
        if (resp.code === 200) {
            console.log(resp.data)
            commets.value = resp.data
        }
    })
}
function addComment() {

    axios.post('http://localhost:8000/comments/add_one', { video_id: videoItem.id, content: comment.value, user_id: user_id, username: username }).then(res => {
        let resp = res.data
        if (resp.code === 200) {
            // getComments()
            ElMessage.success('评论成功')
        }
    })
}
getComments()
</script>